<template>
    <div class="login-box">
        <div class="login-main">
            <a-typography :level="5" class="title">用户登录</a-typography>
            <a-form ref="formref" :model="formdata" :labelCol="{display:'none'}" :rules="rules" @finish="tologin">
                <a-form-item hasFeeback name="username">
                    <a-input block v-model:value="formdata.username" placeholder="请输入用户名" />
                </a-form-item>
                <a-form-item hasFeeback name="密码">
                    <a-input block v-model:value="formdata.password" type="password" placeholder="请输入密码" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" block html-type="submit" shape="round">确认登录</a-button>
                    <a-button type="default" block shape="round" @click="resetform" class="reset">重新输入</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<style lang="less" scoped>
@import url('@/assets/css/login.less');
</style>
<script>
import { message } from 'ant-design-vue';
import { defineComponent,reactive,ref, toRaw } from 'vue'
import { loginIn } from '@/api/index';
import {useStore} from 'vuex';
import { useRouter } from 'vue-router';


export default defineComponent({
    setup() {
        const formdata=reactive({
            username:'',
            password:'',
            longtime:false,
        });

        const store=useStore();
        const router=useRouter();

        message.config({top:'150px',duration:1.5});
         
        

        const formref=ref();

        const tologin=()=>{
            let cs=toRaw(formdata);
            loginIn(cs).then(
                res=>{
                    if(res.data['code']===0){
                        message.error(res.data['msg']);
                    }
                    else if(res.data['code']===200){
                        let admin=res.data['data'];
                        
                        store.dispatch('auth/initauthor',admin);
                        router.push({name:'Index'});
                    }
                    else{
                        message.error('服务器错误');
                    }
                },
                err=>{
                    console.log(err)
                }
                
            )
        };

        const checkinput= async (_rules,value) =>{
            if(!value){
                return Promise.reject('不能为空');
            }
            return Promise.resolve();
        };

        const rules={
            username:[{required:true,validator:checkinput,trigger:'blur'}],
            password:[{required:true,validator:checkinput,trigger:'blur'}],
        };

        const resetform= () =>{
            formref.value.resetFields();
        };

        document.title='后台用户登录';

        return {
            formdata,tologin,rules,resetform
        }
    },
})
</script>
